<template>
  <div>
     <img :src="row.dogImgUrl" alt="">
     <h4 @click="fn(row.dogName,$event)">{{row.dogName}}</h4>
   </div>
</template>
 
<script>
export default {
  name: "MyDog",
  components: {},
  props: {
    row:{
        type:Object,
        required:true
    }
  },
  data() {
    return {};
  },
  computed: {},
  watch: {},
  created() {},
  methods: {
    fn(name,e){
        this.$emit('dealclick',name)
        const r=Math.floor(Math.random()*256)
        const g=Math.floor(Math.random()*256)
        const b=Math.floor(Math.random()*256)
        const colStr=`rgb(${r},${g},${b})`
        e.target.style.background=colStr
    }
  }
};
</script>

<style scoped lang="less">
     div{
        float: left;
        margin: 10px;
        border:1px solid #ccc;
        width: 200px;
        height: 300px;
        overflow: hidden;
        img{
           width: 100%; 
           height: 260px;
        }
        h4{
            text-align: center;
            height: 40px;
            line-height: 40px;
            margin: 0;
            padding: 0;
            cursor: pointer;
        }
     }
</style>